@charset "utf-8";
/* CSS Document */

:root {
    --card-size: 340px;
    --text-height: 70px;
    --corner-radius: 50px;
    --blue-52-opacity: rgba(0, 74, 172, 0.52);
    --yellow: #f39c12;
    --gap-size: 60px;
    --division-color: #3498db;
    --light-bg-color: #f7fcfb;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: var(--light-bg-color);
}

/* --- REMOVED: FADED DIVIDERS BETWEEN CARDS --- */

/* --- Grid Layout with Simple Spacing --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--card-size)); /* 3 fixed-width cards */
    gap: var(--gap-size);
    
    /* Remove extra padding here */
    padding: 0;

    /* Calculate width of grid: 3 cards + 2 gaps */
    width: calc((var(--card-size) * 3) + (var(--gap-size) * 2));

    /* Center the grid horizontally */
    margin-left: auto;
    margin-right: auto;

    position: relative;
    background: none;
}

/* --- Card Styles --- */
.card {
    width: var(--card-size); 
    height: var(--card-size);
    border-radius: var(--corner-radius);
    background: none; 
    overflow: hidden;
    cursor: pointer;
    position: relative; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
    
    /* REMOVED: BORDERS FOR DIVISIONS */
}

/* --- Image/Placeholder and Image Sizing --- */
.image-placeholder {
    height: 100%;
    position: relative;
    z-index: 0;
    text-align: center;
    line-height: 0;
}

.image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: var(--corner-radius); 
}

/* --- Hover/Sliding Content --- */
.sliding-background-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--text-height);
    z-index: 1; 
    background-color: var(--blue-52-opacity);
    backdrop-filter: blur(6px); 
    -webkit-backdrop-filter: blur(6px); 
    transition: height 0.3s ease-out;
}

.coin-name-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--text-height);
    line-height: var(--text-height);
    text-align: center;
    font-weight: bold;
    font-size: 1.4em; 
    color: white;
    transition: transform 0.3s ease-out;
    z-index: 3;
}

.buy-coins-wrapper {
    position: absolute; 
    bottom: 0; 
    left: 0;
    width: 100%;
    height: var(--text-height);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 0; 
    transition: opacity 0.3s ease-out 0.1s;
}

.buy-coins {
    color: white;
    font-weight: bold;
    font-size: 1.2em; 
    padding: 10px 25px; 
    background-color: var(--yellow);
    border-radius: 12px;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
}

/* --- HOVER EFFECT --- */
.card:hover .sliding-background-area {
    height: calc(var(--text-height) * 2); 
}

.card:hover .coin-name-text {
    transform: translateY(calc( -1 * var(--text-height) )); 
}

.card:hover .buy-coins-wrapper {
    opacity: 1;
}